<template>
  <div class="site">
    <ohead title="地址管理" text="添加"></ohead>
    <span @click="show" class="sspan"></span>
    <span @click="addshow" class="ssspan"></span>
    <ul @click="op">
      <li>
        <span>{{this.list[0].name}}</span>
        <span>{{this.list[0].tel}}</span>
        <span>默认</span>
      </li>
      <li>
        <p>{{this.list[0].address}}</p>
        <span>编辑</span>
      </li>
    </ul>
  </div>
</template>

<script>
import ohead from "./orderhead";
export default {
  components: { ohead },
  data(){
    return{
      list:null
    }
  },
  mounted(){
    this.list=JSON.parse(localStorage.getItem('addressdata'))
  },
  methods: {
    show() {
      this.$router.push("/order");
    },
    addshow() {
      this.$router.push("/address");
    },
    op(){

      this.$router.push('/order')
    }
  },
};
</script>

<style lang="less" scoped>
.site {
  .sspan {
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    z-index: 99;
  }
  .ssspan {
    position: fixed;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    z-index: 99;
  }
  ul {
    width: 100%;
    margin-top: 70px;
    li {
      display: flex;
      font-size: 12px;
      padding-left: 50px;
      line-height: 50px;
      text-align: left;
      &:nth-of-type(1) {
        span {
          margin-right: 30px;
          &:nth-of-type(1){
              font-size: 30px;
          }
          &:nth-of-type(3){
              color: #be263d;
          }
        }
      }
      &:nth-of-type(2){
          span{
              margin-right:  20px;
                  color: #cfcfcf;
                  width: 160px;
                  display: inline-block;
                  text-align: right;
              
          }
      }
    }
  }
}
</style>